<template>
	<view>
		<!-- 搜索栏 -->
		<view class="w-full h-[7vh]"
			><nut-searchbar
				placeholder="搜索皂方名称"
				v-model="searchParam"
				@search="search"
				shape="square"
				><template #rightin> <Search2 /> </template></nut-searchbar
		></view>
	</view>
	<scroll-view
		v-if="list.length > 0"
		scroll-y
		class="scroll-view"
		@scrolltolower="handleScrollToLower"
	>
		<view v-for="(item, index) in list" :key="index">
			<view class="item_class" @tap="goDetail(item)"
				><text>{{ item.name }}</text
				><view class="easy_between">
					<text class="text-[#999] text-sm">{{ item.time }}</text>
					<image
						class="w-[5vw] h-[5vw]"
						src="../../assets/rightArrow.svg"
					/> </view
			></view>
		</view>
		<view v-if="loading" class="loading">加载中...</view>
		<view v-if="!hasMore" class="no-more">没有更多数据了</view>
	</scroll-view>
  <!-- <virtualList v-if="list.length > 0"/> -->
	<nut-empty v-else description="空空如也~"></nut-empty>
</template>
<script setup lang="ts">
import virtualList from '@/pages/myFormula/components/virtualList.vue';
import Taro, { useLoad } from '@tarojs/taro';
import { Search2 } from '@nutui/icons-vue-taro';
import { ref, onMounted } from 'vue';

const searchParam = ref('');
const search = (val: string) => {
	searchParam.value = val;
	console.log(val);
};

const list = ref([] as any[]);
const loading = ref(false);
const hasMore = ref(true);
const page = ref(1);

const goDetail = (item) => {
	// console.log(item, 'detail');
	const data = {
		totalOilWeight: 500,
		NaOHPurity: 100,
    name: '橄榄皂',
		water: 2,
		substractNaOH: 0,
		remark: '',
		oilLists: [
			{ name: '橄榄油', weight: 200, INS: 100, proportion: 50 },
			{ name: '椰子油', weight: 200, INS: 100, proportion: 50 },
			{ name: '棕榈油', weight: 100, INS: 100 },
		],
		otherLists: [
			{ name: '蜂蜜', weight: 20 },
			{ name: '玫瑰精油', weight: 20 },
		],
		activeTab: 2,
		NaOHWeight: 90,
		waterWeight: 180,
		otherWeight: 30,
		totalINS: 120,
		totalWeight: 800,
		type: 'solid',
	};

	Taro.navigateTo({
		url: `/pages/formulaDetail/index?obj=${encodeURIComponent(
			JSON.stringify(data)
		)}`,
	});
};
// 模拟接口请求
const fetchData = async (page) => {
	list.value = [
		{ name: '皂方1', time: '2021-10-10' },
		{ name: '皂方2', time: '2021-10-10' },
		{ name: '皂方3', time: '2021-10-10' },
	];

	// loading.value = true;
	// const res = await new Promise((resolve) => {
	// 	setTimeout(() => {
	// 		resolve({
	// 			data: Array.from({ length: 10 }, (_, i) => ({
	// 				id: (page - 1) * 10 + i + 1, // 假设每条数据有一个唯一 id
	// 				text: `Item ${(page - 1) * 10 + i + 1}`,
	// 			})),
	// 		});
	// 	}, 1000);
	// });

	// if (res.data.length > 0) {
	// 	// 去重逻辑：过滤掉已经存在于 list 中的数据
	// 	const newData = res.data.filter(
	// 		(newItem) => !list.value.some((item) => item.id === newItem.id)
	// 	);

	// 	// 如果有新数据，追加到列表中
	// 	if (newData.length > 0) {
	// 		list.value = [...list.value, ...newData];
	// 		page.value += 1;
	// 	} else {
	// 		// 如果没有新数据，说明已经加载完了
	// 		hasMore.value = false;
	// 	}
	// } else {
	// 	// 如果接口返回空数据，说明没有更多数据了
	// 	hasMore.value = false;
	// }
	// loading.value = false;
};

// 初始化加载第一页数据
onMounted(() => {
	fetchData(1);
});

// 滚动到底部加载更多
const handleScrollToLower = () => {
	if (!loading.value && hasMore.value) {
		fetchData(page.value);
	}
};
</script>
<style lang="scss">
.item_class {
	width: 100%;
	height: 100px;
	border-bottom: #eee 1rpx solid;
	padding: 10px 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.loading,
.no-more {
	width: 100%;
	text-align: center;
	font-size: 24rpx;
	color: #999;
}
</style>
